<template>
    <div class="tabMenu">
    <scroll class="content" ref="scroll">
            <div class="menu-list-item"
                 v-for="(item, index) in getCartdata"
                 :class="{active: index===currentIndex}"
                 :key="index"
                 @click="itemClick(index)">
                {{item.title}}
            </div>
    </scroll>
    </div>
</template>

<script>
    import  Scroll from  '../../../components/common/scroll/Scroll'
    export default {
        name: "tab-menu",
        props:{
            getCartdata:{
                type:Array,
                default(){
                    return []
                }
            }
        },
        components:{
            Scroll
        },
        data(){
            return{
                currentIndex: 0
            }
        },
        methods:{
            itemClick(index){
                this.currentIndex = index
                this.$emit('selectItem', index)
            }
        },
        mounted() {
            this.$refs.scroll.scroll.refresh()
        }
    }
</script>

<style scoped>
    .tabMenu {
        background-color: #f6f6f6;
        height: 100%;
        width: 100px;
        box-sizing: border-box;
    }
   .content{
       height: calc(100% - 44px - 49px);
       width: 100px;
       overflow: hidden;
       position: fixed;
   }
    .menu-list-item {
        height: 45px;
        line-height: 45px;
        text-align: center;
        font-size: 14px;
    }

    .active {
        font-weight: 700;
        color: var(--color-high-text);
        background-color: #fff;
        border-left: 3px solid var(--color-high-text);
    }
</style>